@extends('admin.layout.main')
@section("content")
    @verbatim
        <script type="text/html" id="IDTpl">
            <a href="/admin/user/{{d.user_id}}/setting"><span style="color: #F581B1;">{{ d.user_id }}</span></a>
        </script>
        <script type="text/html" id="IDTpl2">
            <a href="/admin/customer/{{d.customer_id}}/setting"><span style="color: #F581B1;">{{ d.customer_id }}</span></a>
        </script>
        <script type="text/html" id="IDTpl3">
            <a href="/admin/product/{{d.product_id}}/setting"><span style="color: #F581B1;">{{ d.product_id }}</span></a>
        </script>
    @endverbatim
    <div class="layui-tab layui-tab-card" lay-allowclose="true">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="demoTable">
                    <select name="interest" id="xzk" style="height:38px;" lay-filter="aihao">
                        <option value="">默认</option>
                        <option value="ID">ID</option>
                        <option value="name" selected="">商机名</option>
                    </select>
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <div class="layui-btn-group demoTable" id="layerDemo" style="width:100%">
                    <div style="float:right;" class="is_show">
                        <button class="layui-btn" data-type="getCheckData">删除选中行数据</button>
                        <button class="layui-btn" data-type="getCheckLength">获取选中数据</button>
                        <button class="layui-btn" data-type="isAll">导出数据</button>
                    </div>
                </div>
                <table id="demo" lay-filter="test" class="layui-hide"></table>
            </div>
            <div class="layui-tab-item">2</div>
            <div class="layui-tab-item">3</div>
            <div class="layui-tab-item">4</div>
            <div class="layui-tab-item">5</div>
            <div class="layui-tab-item">6</div>
        </div>
    </div>
    @verbatim
    <script type="text/html" id="switchTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <div class="layui-progress">
            <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
        </div>
    </script>
    @endverbatim
    <script>
        layui.use('table', function(){
            var table = layui.table ,form = layui.form;
            //第一个实例
            //第一个表格实例
            table.render({
                elem: '#demo'
                ,height: 315
                ,url:"/admin/business/data" //数据接口
                ,page: true //开启分页
                ,id:'idTest'
                ,cellMinWidth: 90
                ,cols: [[ //表头
                    {type:'checkbox'}
                    ,{field: 'id',width:80,title: 'ID', sort: true}
                    ,{field: 'name',width:80,title: '商机名',edit: 'text',sort: true }
                    ,{field: 'money',width:80, title: '金钱', edit: 'text'}
                    ,{field: 'progress',width:80, title: '商机进度'}
                    ,{field: 'transaction_probability',width:80, title: '成交几率', edit: 'text'}
                    ,{field: 'customer_id',width:80, title: '客户ID', templet: '#IDTpl2'}
                    ,{field: 'product_id', width:80,title: '产品ID', templet: '#IDTpl3'}
                    ,{field: 'user_id', width:80,title: '处理人ID',templet: '#IDTpl'}
                    ,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
            });
            var $ = layui.$, active = {
                reload: function(){
                    var key =document.getElementById('xzk').value;
                    var value=$('#demoReload');
                    //执行重载
                    table.reload('idTest', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                key: key.toString(),
                                value:value.val()
                            }
                        }
                    });
                    //复选框操作
                    // var aa=$('#xzk');
                    //console.log(aa[0][2]);
                },isAll: function(){ //验证是否全选
//                    var checkStatus = table.checkStatus('idTest');
//                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    window.location.href='/admin/product/excel/export'
                }
                ,getCheckLength: function(){ //获取选中数目
                    var checkStatus = table.checkStatus('idTest')
                        ,data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                }
                ,getCheckData: function(){ //删除选中数据
                    var checkStatus = table.checkStatus('idTest')
                        ,data = (checkStatus.data);
                    if(data=="")
                    {
                        layer.msg("你没选中");
                    }
                    console.log(JSON.stringify(data[0]['id']));
                    var arr=[];
                    for(var i=0;i<data.length;i++)
                    {
                        arr.push(data[i]['id']);
                    }
                    var data1=Object.assign({},arr)
                    $.ajax({
                        //几个参数需要注意一下
                        type: "get",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/admin/business/del" ,//url
                        data:data1 ,
                        success: function (result) {
                            if(result.code=200){
                                layer.msg(result.msg);
                                $(".layui-laypage-btn").click();
                            }

                            //window.location.reload();  //页面刷新
                        },
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                var newArray = [];

                for(var name in data)
                {
                    newArray.push(name);
                };
                //console.log(newArray);
                //var arr=['id','name','phone','email'];
                var fliters=(filter(newArray)+'</div>');
                function filter(str) {
                    var field_array=field()[0]//获取字段对应的中文
                    //console.log(field_array);
                    var a = '<div style="padding: 10px; line-height: 42px; background-color: #393D49; color: #fff; font-weight: 300;">';
                    str.forEach(function(i,index){
                        if(data[i]!=null)
                        {
                            a+='<span class="layui-form-label" style="width:200px;text-align: left" >'+" "+field_array[i]+":"+data[i]+"</span><br>";
                        }
                    })
                    return a;
                }
                if(layEvent === 'detail'){ //查看
                    //示范一个公告层
                    layer.open({
                        type: 1
                        ,title: "大家好" //False不显示标题栏
                        ,closeBtn: false
                        ,area: '300px;'
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['火速围观', '残忍拒绝']
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content:fliters //调用的函数
                        ,success: function(layero){
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '/'
                                ,target: '_self'
                            });
                            //filter()
                        }
                    });
                } else if(layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        window.location.href = '/admin/business/' + data.id + '/delete'
                    });
                }else if(layEvent === 'edit'){ //编辑
                   // window.location.href='/admin/business/'+data.id+'/edit'
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/admin/business/"+data.id+"/update" ,//url
                        data:data ,
                        success: function (result) {
                            if(result['statu']==0){
                                alert("未修改或无法直接修改将为你跳转修改页面")
                                window.location.href='/admin/business/'+data.id+'/edit'
                                //layer.msg('请双击需要修改的地方，做出修改后再点击编辑 谢谢');
                            }
                            else{
                                layer.msg('修改成功');
                            }
                        },
                    });
                }
            });
        });
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" data-type="auto" lay-event="del">删除</a>
    </script>
@endsection